<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app"></div> 
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>

    /*
    响应式数据
ref、reactive
定义数据：1）ref定义的是基本类型的数据（备注：也可以定义对象，但是它的内部使用的还是reactive）
2）reactive定义的是对象或数组类型
【原理】
1.ref函数其实底层使用的是数据劫持实现数据相应
2.reactive底层是通过reflet实现的
【使用】
1.ref定义的响应式数据通过data.value访问，如果是基本类型，在html代码中使用插值语法时，不需要写.value
2.reactive不需要使用.value，直接通过对象.属性访问，例如：job.type、job.salary

toRefs(响应式数据结构-对象)
当响应式数据类型是对象时，我们想直接访问对象中的属性，就可以使用toRefs函数进行封装*/
    const{ref,reactive,toRefs,readonly}=Vue
    const app=Vue.createApp({
        template:`
        <h2>我的信息</h2>
        <h2>姓名：{{name}}</h2>
        <table>
            <tr v-for="(item,index) in job">
               <td>{{job.type}}</td><td>{{job.salary}}</td> </tr>
            </table>
        `,
        setup(props) {
            let name=ref('polk')
            let age=ref(25)
            let job=reactive({
                type:'java开发工程师',salary:'25k'
            })
            let {type,salary}=toRefs(job);
            // setTimeout(()=>{
            //     job.type='后端工程师'
            //     job.salary='30k'
            //     console.log(job)
            // },2000);
            return{name,age,job,type,salary}
        }
    })
    app.mount("#app")
</script>
</html>